<template>
    <div class="Menu">
        <div class="Icon" @mousedown="AddDataBlock">
            <hdd-two-tone />
        </div>
        <div class="Icon" @mousedown="AddCodeBlock">
            <code-two-tone />
        </div>
    </div>

    <Board @MouseUpEvent="MouseUpEvent" :width="4000" :height="2000">
        <template #default="{ scale, MoveEvent }">
            <DataBlock
                v-for="(item, index) in Block"
                :item="item"
                :scale="scale"
                :HoverId="HoverId"
                :MoveEvent="MoveEvent"
                @DeleteItem="() => DeleteDataBlock(index)"
                @SetHoverId="SetHoverId"
            />
            <CodeBlock
                v-for="(item, index) in Code"
                :item="item"
                :scale="scale"
                :HoverId="HoverId"
                :MoveEvent="MoveEvent"
                @DeleteItem="() => DeleteCodeBlock(index)"
                @SetHoverId="SetHoverId"
            />
            <DataLink v-for="item in Link" :item="item" :scale="scale" />
        </template>
    </Board>
    <div class="MoveBlick" :style="DataBlockPosition" v-if="DataBlockStatus">DataBlcok</div>
    <div class="MoveBlick" :style="CodeBlockPosition" v-if="CodeBlockStatus">CodeBlock</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { HddTwoTone, CodeTwoTone } from "@ant-design/icons-vue";
import Board from "./Board.vue";
import DataBlock from "./DataBlock.vue";
import CodeBlock from "./CodeBlock.vue";
import DataLink from "./DataLink.vue";
import SnowflakeID from "./SnowflakeID.js";

const LinkStatus = ref(false);

provide("LinkStatus", LinkStatus);

const HoverId = ref(null);
const SetHoverId = (id) => {
    HoverId.value = id;
};

const Link = ref([{}]);

const Block = ref([
    {
        id: SnowflakeID.generate(),
        x: 1400,
        y: 600,
    },
    {
        id: SnowflakeID.generate(),
        x: 1800,
        y: 600,
    },
]);
const DataBlockStatus = ref(false);
const DataBlockPosition = ref({ x: 0, y: 0 });
const AddDataBlock = () => {
    DataBlockStatus.value = true;
    const AddDataBlockMoveEvent = (event) => {
        DataBlockPosition.value.left = event.clientX + "px";
        DataBlockPosition.value.top = event.clientY + "px";
    };
    const AddDataBlockMoveEnd = () => {
        DataBlockStatus.value = false;
        document.removeEventListener("mousemove", AddDataBlockMoveEvent);
        document.removeEventListener("mouseup", AddDataBlockMoveEnd);
    };
    document.addEventListener("mousemove", AddDataBlockMoveEvent);
    document.addEventListener("mouseup", AddDataBlockMoveEnd);
};
const DeleteDataBlock = (index) => {
    Block.value.splice(index, 1);
};

const Code = ref([]);
const CodeBlockStatus = ref(false);
const CodeBlockPosition = ref({ x: 0, y: 0 });
const AddCodeBlock = () => {
    CodeBlockStatus.value = true;
    const AddDataBlockMoveEvent = (event) => {
        CodeBlockPosition.value.left = event.clientX + "px";
        CodeBlockPosition.value.top = event.clientY + "px";
    };
    const AddDataBlockMoveEnd = () => {
        CodeBlockStatus.value = false;
        document.removeEventListener("mousemove", AddDataBlockMoveEvent);
        document.removeEventListener("mouseup", AddDataBlockMoveEnd);
    };
    document.addEventListener("mousemove", AddDataBlockMoveEvent);
    document.addEventListener("mouseup", AddDataBlockMoveEnd);
};

const DeleteCodeBlock = (index) => {
    Code.value.splice(index, 1);
};

const MouseUpEvent = (event) => {
    if (DataBlockStatus.value) {
        Block.value.push({
            id: SnowflakeID.generate(),
            x: event.offsetX,
            y: event.offsetY,
        });
    } else if (CodeBlockStatus.value) {
        Code.value.push({
            id: SnowflakeID.generate(),
            x: event.offsetX,
            y: event.offsetY,
            Code: "\n  return null",
            Args: [],
        });
    }
};
</script>
<style lang="less" scoped>
.Menu {
    width: 50px;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    border-right: 1px solid #aaa;
    .Icon {
        width: 100%;
        line-height: 50px;
        text-align: center;
        font-size: 20px;
        cursor: pointer;
        &:hover {
            background-color: rgba(0, 0, 0, 0.1);
        }
    }
}
.MoveBlick {
    position: absolute;
    padding: 3px 8px;
    border-radius: 3px;
    background-color: rgb(196, 224, 255);
    pointer-events: none;
    transform: translate(-50%, -50%);
}
.Item {
    width: 200px;
    height: 200px;
    background-color: rgba(0, 0, 0, 0.1);
    position: absolute;
    &:hover {
        background-color: #aaa;
    }
}
</style>
